<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8"/>
    <title>用户登录</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta content="Sam" name="author"/>

    <link rel="stylesheet" th:href="@{/global/plugins/layui/css/layui.css}" href="../static/global/plugins/layui/css/layui.css"/>
    <link rel="stylesheet" th:href="@{/pages/css/login.css}" href="../static/pages/css/login.css" media="all"/>
    <script>
        if (window != top)
            top.location.replace(location.href);
    </script>
</head>

<body>
<div class="login-wrapper">

    <div class="login-header">
        <img th:src="@{/global/img/logo.png}" src="../static/global/img/logo.png">
        &nbsp;&nbsp;
        Lotso Web
    </div>

    <div class=" login-body">
        <div class="layui-card">
            <div class="layui-card-header">
                <i class="layui-icon layui-icon-engine"></i>&nbsp;&nbsp;用户登录
            </div>
            <form class="layui-card-body layui-form layui-form-pane" action="login" th:action="@{/login}" method="post">
                <div class="layui-form-item">
                    <label class="layui-form-label"><i class="layui-icon layui-icon-username"></i></label>
                    <div class="layui-input-block">
                        <input name="username" type="text" lay-verify="required" placeholder="账号"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><i class="layui-icon layui-icon-password"></i></label>
                    <div class="layui-input-block">
                        <input name="password" type="password" lay-verify="required" placeholder="密码"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><i class="layui-icon layui-icon-vercode"></i></label>
                    <div class="layui-input-block">
                        <div class="layui-row inline-block">
                            <div class="layui-col-xs7">
                                <input name="code" type="text" lay-verify="required" placeholder="验证码"
                                       class="layui-input">
                            </div>
                            <div class="layui-col-xs5" style="padding-left: 10px;">
                                <img class="login-captcha" src="/api/captcha" th:src="@{/api/captcha}">
                            </div>
                        </div>
                    </div>
                </div>
                <!--<div class="layui-form-item">
                    <a href="javascript:;" class="layui-link">帐号注册</a>
                    <a href="javascript:;" class="layui-link pull-right">忘记密码？</a>
                </div>-->
                <div class="layui-form-item">
                    <button lay-filter="login-submit" class="layui-btn layui-btn-fluid" lay-submit>登 录</button>
                </div>
            </form>
        </div>
    </div>

    <div class="login-footer">
        <p>© 2018 <a href="javascript:;" target="_blank">Lotso.com.cn</a></p>
    </div>
</div>

<script type="text/javascript" th:src="@{/global/plugins/layui/layui.js}" src="../static/global/plugins/layui/layui.js"></script>
<script type="text/javascript" th:src="@{/global/plugins/jquery-3.2.1.min.js}" src="../static/global/plugins/jquery-3.2.1.min.js"></script>
<script type="text/javascript" th:src="@{/global/plugins/backstretch/jquery.backstretch.min.js}" src="../static/global/plugins/backstretch/jquery.backstretch.min.js"></script>

<script type="text/javascript" th:inline="javascript">

    /*<![CDATA[*/
    var basePath = /*[[@{/}]]*/;
    /*]]>*/

    layui.use(['jquery', 'layer'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;

        var error = [[${param.error}]];
        if (error) {
            var errorMsg = [[${session.SPRING_SECURITY_LAST_EXCEPTION != null ? session.SPRING_SECURITY_LAST_EXCEPTION.message : '登录失败'}]];
            errorMsg = errorMsg !== 'Bad credentials' ? errorMsg : '账号密码错误';
            layer.msg(errorMsg, {icon: 5});
        }

        // 图形验证码
        $('.login-captcha').click(function () {
            this.src = this.src + '?t=' + (new Date).getTime();
        });

        // 背景切换
        $.backstretch([
                basePath + "global/img/bg/1.jpg",
                basePath + "global/img/bg/2.jpg",
                basePath + "global/img/bg/3.jpg",
                basePath + "global/img/bg/4.jpg"
            ], {
                fade: 1000,
                duration: 8000
            }
        );
    });
</script>
</body>
</html>